<template>
  <view class="container">
    <!-- 案件概览 -->
    <view class="case-overview">
      <view class="overview-card">
        <view class="case-header">
          <view class="case-info">
            <text class="case-title">{{ currentCase?.title || '我的案件' }}</text>
            <text class="case-subtitle">{{ currentCase?.type || '劳动纠纷' }}</text>
          </view>
          <view class="case-status" :class="currentCase?.status">
            {{ getStatusText(currentCase?.status) }}
          </view>
        </view>
        <view class="case-meta">
          <view class="meta-item">
            <text class="meta-icon">📅</text>
            <text class="meta-label">开始时间</text>
            <text class="meta-value">{{ currentCase?.startDate || '2024-01-15' }}</text>
          </view>
          <view class="meta-item">
            <text class="meta-icon">⏱️</text>
            <text class="meta-label">已用时</text>
            <text class="meta-value">{{ getElapsedTime() }}</text>
          </view>
          <view class="meta-item">
            <text class="meta-icon">📊</text>
            <text class="meta-label">完成度</text>
            <text class="meta-value">{{ getProgressPercentage() }}%</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 进度时间轴 -->
    <view class="progress-timeline">
      <view class="section-title">案件进度</view>
      <view class="timeline-container">
        <view 
          class="timeline-item" 
          v-for="(step, index) in processSteps" 
          :key="index"
          :class="{ 
            'completed': step.status === 'completed',
            'active': step.status === 'active',
            'upcoming': step.status === 'upcoming'
          }"
        >
          <view class="timeline-dot">
            <text class="step-icon" v-if="step.status === 'completed'">✓</text>
            <text class="step-icon" v-else-if="step.status === 'active'">⚡</text>
            <text class="step-number" v-else>{{ index + 1 }}</text>
          </view>
          <view class="timeline-content">
            <view class="step-header">
              <text class="step-title">{{ step.title }}</text>
              <view class="step-status" :class="step.status">
                {{ getStepStatusText(step.status) }}
              </view>
            </view>
            <text class="step-desc">{{ step.description }}</text>
            
            <!-- 当前步骤详情 -->
            <view class="step-details" v-if="step.status === 'active'">
              <view class="detail-item">
                <text class="detail-label">预计完成时间：</text>
                <text class="detail-value">{{ step.expectedDate }}</text>
              </view>
              <view class="detail-item">
                <text class="detail-label">负责人：</text>
                <text class="detail-value">{{ step.assignee || '系统处理' }}</text>
              </view>
              <view class="detail-item" v-if="step.notes">
                <text class="detail-label">备注：</text>
                <text class="detail-value">{{ step.notes }}</text>
              </view>
            </view>
            
            <!-- 已完成步骤详情 -->
            <view class="step-details" v-if="step.status === 'completed'">
              <view class="detail-item">
                <text class="detail-label">完成时间：</text>
                <text class="detail-value">{{ step.completedDate }}</text>
              </view>
              <view class="detail-item">
                <text class="detail-label">处理结果：</text>
                <text class="detail-value">{{ step.result || '已完成' }}</text>
              </view>
            </view>
          </view>
          <view class="timeline-line" v-if="index < processSteps.length - 1"></view>
        </view>
      </view>
    </view>

    <!-- 最新动态 -->
    <view class="recent-updates">
      <view class="section-title">最新动态</view>
      <view class="updates-list">
        <view 
          class="update-item" 
          v-for="(update, index) in recentUpdates" 
          :key="index"
          :class="update.type"
        >
          <view class="update-icon">
            <text class="icon-text">{{ getUpdateIcon(update.type) }}</text>
          </view>
          <view class="update-content">
            <text class="update-title">{{ update.title }}</text>
            <text class="update-desc">{{ update.description }}</text>
            <text class="update-time">{{ update.time }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 律师/调解员信息 -->
    <view class="contact-section" v-if="assignedLawyer">
      <view class="section-title">您的专属律师</view>
      <view class="lawyer-card">
        <view class="lawyer-avatar">
          <text class="avatar-text">{{ assignedLawyer.name.charAt(0) }}</text>
        </view>
        <view class="lawyer-info">
          <text class="lawyer-name">{{ assignedLawyer.name }}</text>
          <text class="lawyer-title">{{ assignedLawyer.title }}</text>
          <text class="lawyer-experience">{{ assignedLawyer.experience }}年经验</text>
        </view>
        <view class="lawyer-actions">
          <button class="btn btn-outline btn-small" @click="callLawyer">
            <text class="action-icon">📞</text>
            电话
          </button>
          <button class="btn btn-primary btn-small" @click="chatWithLawyer">
            <text class="action-icon">💬</text>
            咨询
          </button>
        </view>
      </view>
    </view>

    <!-- 案件文件 -->
    <view class="documents-section" v-if="documents.length > 0">
      <view class="section-title">案件文件</view>
      <view class="documents-list">
        <view 
          class="document-item" 
          v-for="(doc, index) in documents" 
          :key="index"
          @click="viewDocument(doc)"
        >
          <view class="doc-icon">
            <text class="icon-text">{{ getDocumentIcon(doc.type) }}</text>
          </view>
          <view class="doc-info">
            <text class="doc-name">{{ doc.name }}</text>
            <text class="doc-size">{{ doc.size }}</text>
          </view>
          <view class="doc-actions">
            <button class="btn btn-outline btn-small" @click="downloadDocument(doc)">
              下载
            </button>
          </view>
        </view>
      </view>
    </view>

    <!-- 费用明细 -->
    <view class="cost-section" v-if="costDetails.length > 0">
      <view class="section-title">费用明细</view>
      <view class="cost-list">
        <view 
          class="cost-item" 
          v-for="(cost, index) in costDetails" 
          :key="index"
        >
          <view class="cost-info">
            <text class="cost-name">{{ cost.name }}</text>
            <text class="cost-desc">{{ cost.description }}</text>
          </view>
          <text class="cost-amount">{{ cost.amount }}</text>
        </view>
        <view class="cost-total">
          <text class="total-label">总计</text>
          <text class="total-amount">{{ getTotalCost() }}</text>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-section">
      <button class="btn btn-outline" @click="refreshProgress">
        刷新进度
      </button>
      <button class="btn btn-primary" @click="contactService">
        联系客服
      </button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ProgressTracking',
  data() {
    return {
      currentCase: {
        title: '劳动纠纷案件',
        type: '劳动合同纠纷',
        status: 'processing',
        startDate: '2024-01-15',
        solution: '劳动仲裁'
      },
      processSteps: [
        {
          title: '准备申请材料',
          description: '收集相关证据和材料，准备仲裁申请书',
          status: 'completed',
          completedDate: '2024-01-16',
          result: '材料已准备完毕'
        },
        {
          title: '提交仲裁申请',
          description: '向劳动仲裁委员会提交申请材料',
          status: 'completed',
          completedDate: '2024-01-17',
          result: '申请已受理'
        },
        {
          title: '立案审查',
          description: '仲裁委员会审查申请材料',
          status: 'completed',
          completedDate: '2024-01-22',
          result: '已立案，案件编号：LA2024001'
        },
        {
          title: '调解阶段',
          description: '仲裁委员会组织双方进行调解',
          status: 'active',
          expectedDate: '2024-02-05',
          assignee: '张调解员',
          notes: '正在联系对方当事人'
        },
        {
          title: '开庭审理',
          description: '如果调解失败，进行开庭审理',
          status: 'upcoming',
          expectedDate: '2024-02-15'
        },
        {
          title: '仲裁裁决',
          description: '仲裁委员会作出最终裁决',
          status: 'upcoming',
          expectedDate: '2024-03-01'
        }
      ],
      recentUpdates: [
        {
          type: 'progress',
          title: '案件进入调解阶段',
          description: '仲裁委员会已联系对方当事人，正在安排调解时间',
          time: '2024-01-22 14:30'
        },
        {
          type: 'document',
          title: '新文件上传',
          description: '对方当事人已提交答辩材料',
          time: '2024-01-21 16:45'
        },
        {
          type: 'notification',
          title: '案件状态更新',
          description: '您的案件已通过立案审查，正式进入调解程序',
          time: '2024-01-20 10:15'
        }
      ],
      assignedLawyer: {
        name: '李律师',
        title: '高级律师',
        experience: '8',
        phone: '138****8888',
        speciality: '劳动法、合同法'
      },
      documents: [
        {
          name: '劳动仲裁申请书',
          type: 'document',
          size: '2.3MB',
          uploadDate: '2024-01-16'
        },
        {
          name: '劳动合同',
          type: 'contract',
          size: '1.8MB',
          uploadDate: '2024-01-16'
        },
        {
          name: '工资条',
          type: 'image',
          size: '856KB',
          uploadDate: '2024-01-16'
        }
      ],
      costDetails: [
        {
          name: '仲裁申请费',
          description: '劳动仲裁委员会收取',
          amount: '¥10'
        },
        {
          name: '律师咨询费',
          description: '专业律师指导服务',
          amount: '¥200'
        }
      ]
    }
  },
  onLoad(options) {
    if (options.process) {
      const processData = JSON.parse(decodeURIComponent(options.process))
      this.currentCase.solution = processData.solution?.name
      // 可以根据传入的流程数据更新进度
    }
  },
  methods: {
    getStatusText(status) {
      const statusMap = {
        'pending': '待处理',
        'processing': '处理中',
        'completed': '已完成',
        'cancelled': '已取消'
      }
      return statusMap[status] || '未知状态'
    },
    
    getStepStatusText(status) {
      const statusMap = {
        'completed': '已完成',
        'active': '进行中',
        'upcoming': '待开始'
      }
      return statusMap[status] || '未知'
    },
    
    getElapsedTime() {
      const startDate = new Date(this.currentCase.startDate)
      const now = new Date()
      const diffTime = Math.abs(now - startDate)
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
      return `${diffDays}天`
    },
    
    getProgressPercentage() {
      const completedSteps = this.processSteps.filter(step => step.status === 'completed').length
      return Math.round((completedSteps / this.processSteps.length) * 100)
    },
    
    getUpdateIcon(type) {
      const iconMap = {
        'progress': '📈',
        'document': '📄',
        'notification': '🔔',
        'payment': '💰',
        'meeting': '👥'
      }
      return iconMap[type] || '📢'
    },
    
    getDocumentIcon(type) {
      const iconMap = {
        'document': '📄',
        'contract': '📋',
        'image': '🖼️',
        'pdf': '📕',
        'word': '📘'
      }
      return iconMap[type] || '📄'
    },
    
    getTotalCost() {
      const total = this.costDetails.reduce((sum, cost) => {
        const amount = parseFloat(cost.amount.replace(/[^\d.]/g, '')) || 0
        return sum + amount
      }, 0)
      return `¥${total.toFixed(0)}`
    },
    
    callLawyer() {
      uni.showModal({
        title: '联系律师',
        content: `确定拨打${this.assignedLawyer.name}律师的电话吗？\n电话：${this.assignedLawyer.phone}`,
        success: (res) => {
          if (res.confirm) {
            uni.makePhoneCall({
              phoneNumber: this.assignedLawyer.phone
            })
          }
        }
      })
    },
    
    chatWithLawyer() {
      uni.showToast({
        title: '律师咨询功能开发中',
        icon: 'none'
      })
    },
    
    viewDocument(doc) {
      uni.showModal({
        title: doc.name,
        content: `文件类型：${doc.type}\n文件大小：${doc.size}\n上传时间：${doc.uploadDate}`,
        success: (res) => {
          if (res.confirm) {
            this.downloadDocument(doc)
          }
        }
      })
    },
    
    downloadDocument(doc) {
      uni.showToast({
        title: `正在下载${doc.name}`,
        icon: 'loading'
      })
      
      setTimeout(() => {
        uni.showToast({
          title: '下载完成',
          icon: 'success'
        })
      }, 2000)
    },
    
    refreshProgress() {
      uni.showLoading({
        title: '刷新中...'
      })
      
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '进度已更新',
          icon: 'success'
        })
      }, 1500)
    },
    
    contactService() {
      uni.showActionSheet({
        itemList: ['在线客服', '电话客服', '留言反馈'],
        success: (res) => {
          const actions = ['在线客服', '电话客服', '留言反馈']
          uni.showToast({
            title: `正在连接${actions[res.tapIndex]}`,
            icon: 'none'
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: var(--background-color);
}

/* 案件概览 */
.case-overview {
  padding: 20rpx;
}

.overview-card {
  background: var(--card-color);
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(10, 36, 99, 0.08);
  border: 1rpx solid var(--border-color);
}

.case-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 25rpx;
}

.case-info {
  flex: 1;
}

.case-title {
  font-size: 32rpx;
  font-weight: bold;
  color: var(--text-primary);
  display: block;
  margin-bottom: 8rpx;
}

.case-subtitle {
  font-size: 24rpx;
  color: var(--text-secondary);
}

.case-status {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
  font-weight: 600;
}

.case-status.processing {
  background: rgba(10, 36, 99, 0.1);
  color: var(--primary-color);
}

.case-status.completed {
  background: rgba(40, 167, 69, 0.1);
  color: var(--success-color);
}

.case-status.pending {
  background: rgba(255, 193, 7, 0.1);
  color: var(--warning-color);
}

.case-meta {
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
  background: var(--background-color);
  border-radius: 12rpx;
}

.meta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
}

.meta-icon {
  font-size: 24rpx;
}

.meta-label {
  font-size: 20rpx;
  color: var(--text-muted);
}

.meta-value {
  font-size: 22rpx;
  font-weight: 600;
  color: var(--text-primary);
}

/* 进度时间轴 */
.progress-timeline {
  padding: 20rpx;
}

.timeline-container {
  position: relative;
  padding-left: 40rpx;
}

.timeline-container::before {
  content: '';
  position: absolute;
  left: 20rpx;
  top: 0;
  bottom: 0;
  width: 2rpx;
  background: var(--border-color);
}

.timeline-item {
  position: relative;
  margin-bottom: 40rpx;
  padding-left: 40rpx;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-dot {
  position: absolute;
  left: -30rpx;
  top: 10rpx;
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.timeline-item.completed .timeline-dot {
  background: var(--success-color);
  color: white;
}

.timeline-item.active .timeline-dot {
  background: var(--primary-color);
  color: white;
  animation: pulse 2s infinite;
}

.timeline-item.upcoming .timeline-dot {
  background: var(--border-color);
  color: var(--text-muted);
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(10, 36, 99, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10rpx rgba(10, 36, 99, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(10, 36, 99, 0);
  }
}

.step-icon, .step-number {
  font-size: 20rpx;
  font-weight: bold;
}

.timeline-content {
  background: var(--card-color);
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(10, 36, 99, 0.08);
  border: 1rpx solid var(--border-color);
}

.step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.step-title {
  font-size: 28rpx;
  font-weight: 600;
  color: var(--text-primary);
}

.step-status {
  padding: 6rpx 12rpx;
  border-radius: 12rpx;
  font-size: 20rpx;
  font-weight: 500;
}

.step-status.completed {
  background: rgba(40, 167, 69, 0.1);
  color: var(--success-color);
}

.step-status.active {
  background: rgba(10, 36, 99, 0.1);
  color: var(--primary-color);
}

.step-status.upcoming {
  background: rgba(153, 153, 153, 0.1);
  color: var(--text-muted);
}

.step-desc {
  font-size: 24rpx;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20rpx;
  display: block;
}

.step-details {
  background: var(--background-color);
  border-radius: 12rpx;
  padding: 20rpx;
  margin-top: 15rpx;
}

.detail-item {
  display: flex;
  margin-bottom: 10rpx;
}

.detail-item:last-child {
  margin-bottom: 0;
}

.detail-label {
  font-size: 22rpx;
  color: var(--text-secondary);
  width: 160rpx;
  flex-shrink: 0;
}

.detail-value {
  font-size: 22rpx;
  color: var(--text-primary);
  flex: 1;
}

.timeline-line {
  position: absolute;
  left: 20rpx;
  top: 40rpx;
  width: 2rpx;
  height: 40rpx;
  background: var(--border-color);
  z-index: 1;
}

/* 最新动态 */
.recent-updates {
  padding: 20rpx;
}

.updates-list {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
}

.update-item {
  display: flex;
  align-items: flex-start;
  gap: 15rpx;
  padding: 20rpx;
  background: var(--card-color);
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(10, 36, 99, 0.05);
  border: 1rpx solid var(--border-color);
}

.update-icon {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  background: var(--background-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-text {
  font-size: 24rpx;
}

.update-content {
  flex: 1;
}

.update-title {
  font-size: 24rpx;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
  margin-bottom: 5rpx;
}

.update-desc {
  font-size: 22rpx;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 8rpx;
  display: block;
}

.update-time {
  font-size: 20rpx;
  color: var(--text-muted);
}

/* 律师信息 */
.contact-section {
  padding: 20rpx;
}

.lawyer-card {
  display: flex;
  align-items: center;
  gap: 20rpx;
  padding: 25rpx;
  background: var(--card-color);
  border-radius: 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(10, 36, 99, 0.08);
  border: 1rpx solid var(--border-color);
}

.lawyer-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.avatar-text {
  font-size: 32rpx;
  font-weight: bold;
  color: white;
}

.lawyer-info {
  flex: 1;
}

.lawyer-name {
  font-size: 28rpx;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
  margin-bottom: 5rpx;
}

.lawyer-title {
  font-size: 22rpx;
  color: var(--text-secondary);
  display: block;
  margin-bottom: 5rpx;
}

.lawyer-experience {
  font-size: 20rpx;
  color: var(--text-muted);
}

.lawyer-actions {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.action-icon {
  font-size: 20rpx;
  margin-right: 5rpx;
}

/* 案件文件 */
.documents-section {
  padding: 20rpx;
}

.documents-list {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
}

.document-item {
  display: flex;
  align-items: center;
  gap: 15rpx;
  padding: 20rpx;
  background: var(--card-color);
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(10, 36, 99, 0.05);
  border: 1rpx solid var(--border-color);
  transition: all 0.3s ease;
}

.document-item:active {
  background: var(--background-color);
}

.doc-icon {
  width: 50rpx;
  height: 50rpx;
  border-radius: 8rpx;
  background: var(--background-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.doc-info {
  flex: 1;
}

.doc-name {
  font-size: 24rpx;
  font-weight: 500;
  color: var(--text-primary);
  display: block;
  margin-bottom: 5rpx;
}

.doc-size {
  font-size: 20rpx;
  color: var(--text-muted);
}

/* 费用明细 */
.cost-section {
  padding: 20rpx;
}

.cost-list {
  background: var(--card-color);
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(10, 36, 99, 0.08);
  border: 1rpx solid var(--border-color);
}

.cost-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15rpx 0;
  border-bottom: 1rpx solid var(--border-color);
}

.cost-item:last-child {
  border-bottom: none;
}

.cost-info {
  flex: 1;
}

.cost-name {
  font-size: 24rpx;
  font-weight: 500;
  color: var(--text-primary);
  display: block;
  margin-bottom: 5rpx;
}

.cost-desc {
  font-size: 20rpx;
  color: var(--text-muted);
}

.cost-amount {
  font-size: 24rpx;
  font-weight: 600;
  color: var(--accent-color);
}

.cost-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  margin-top: 15rpx;
  border-top: 2rpx solid var(--border-color);
}

.total-label {
  font-size: 28rpx;
  font-weight: bold;
  color: var(--text-primary);
}

.total-amount {
  font-size: 28rpx;
  font-weight: bold;
  color: var(--accent-color);
}

/* 操作按钮 */
.action-section {
  display: flex;
  gap: 20rpx;
  padding: 30rpx 20rpx;
}

.action-section .btn {
  flex: 1;
  padding: 25rpx;
  font-size: 26rpx;
}

/* 响应式设计 */
@media (max-width: 750rpx) {
  .case-meta {
    flex-direction: column;
    gap: 15rpx;
  }
  
  .meta-item {
    flex-direction: row;
    justify-content: space-between;
  }
  
  .lawyer-card {
    flex-direction: column;
    text-align: center;
  }
  
  .lawyer-actions {
    flex-direction: row;
    width: 100%;
  }
  
  .lawyer-actions .btn {
    flex: 1;
  }
}
</style>
